<template>
  <div>


    <Form ref="formInline" inline>
      <!--<Button type="primary" class="fl" icon="plus" @click="add">增加用户</Button>-->

    </Form>


    <Form ref="userInfo" :model="userInfo" :label-width="250" :rules="ruleInline" style="height: 700px;">
      <FormItem label="姓名" prop="name">
        <Input v-model="userInfo.name" placeholder="姓名"></Input>
      </FormItem>

      <FormItem label="公司" prop="company_id">
        <Select v-model="userInfo.company_id" style="width:400px;" :disabled="userInfo['company_id']>0">
          <Option
            v-for="item in companyList"
            :value="item.value"
            :key="item.value">
            {{ item.label }}
          </Option>
        </Select>
      </FormItem>

      <FormItem label="公司地址" prop="office_address">
        <Input v-model="userInfo.office_address" placeholder="公司地址"></Input>
      </FormItem>
      <FormItem label="办公电话" prop="office_telephone">
        <Input v-model="userInfo.office_telephone" placeholder="办公电话"></Input>
      </FormItem>

      <FormItem label="手机号码" prop="mobile">
        <Input v-model="userInfo.mobile" placeholder="手机号码"></Input>
      </FormItem>

      <FormItem label="职务" prop="job_title">
        <Input v-model="userInfo.job_title" placeholder="职务"></Input>
      </FormItem>

      <FormItem label="职称" prop="profession_title">
        <Input v-model="userInfo.profession_title" placeholder="职称"></Input>
      </FormItem>

      <FormItem label="家庭住址" prop="profession_title">
        <Input v-model="userInfo.family_address" placeholder="家庭住址"></Input>
      </FormItem>

      <FormItem label="关键日期" prop="profession_title">
        <DatePicker type="date" placeholder="关键日期" style="width: 200px"
                    v-model="userInfo.key_date"></DatePicker>
      </FormItem>

      <FormItem>
        <Button type="primary" @click="post('userInfo',userInfo)">保存</Button>
      </FormItem>
    </Form>


  </div>
</template>
<script>
  import {company, user} from "@/api/supervision";
  import {
    Button,
    DatePicker,
    Form,
    FormItem,
    Input,
    InputNumber,
    Modal,
    Option,
    Radio,
    RadioGroup,
    Select,
    TabPane,
    Tabs,
    Tag
  } from "iview";
  //import {mapGetters} from "vuex";

  export default {
    components: {
      InputNumber,
      Button,
      Form,
      FormItem,
      Input,
      Tabs,
      TabPane,
      RadioGroup,
      Radio,
      Select,
      Option,
      Tag,
      Modal,
      DatePicker
    },
    data() {
      return {
        companyList: [],
        userInfo: {
          id: '',
          name: '',
          company_id: '',
          office_address: '',
          office_telephone: '',
          job_title: '',
          mobile: '',
          profession_title: '',
          family_address: '',
          key_date: '',

        },
        ruleInline: {
          name: [{required: true, message: "必须填写姓名", trigger: "blur"}],
        },
      };
    },
    methods: {
      post(type, data) {

        if(type === 'userInfo') {
          this.$refs["userInfo"].validate(valid => {
            if(valid) {
              if(data.id) {
                //更新数据
                user.update(data.id, data).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push({
                      path: "/supervision/user/list",
                      query: {
                        company_id: this.userInfo.company_id,
                      }
                    });
                  }
                });
              } else {
                //新增数据
                user.create(data).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push({
                      path: "/supervision/user/list",
                      query: {
                        company_id: this.userInfo.company_id,
                      }
                    });
                  }
                });
              }
            } else {
              this.$Message.error("请填写必要信息");
            }
          });
        }
      },
      get(id) {
        user.getInfo(id, {}).then(res => {
          this.userInfo = res.data;

          //this.company_id = this.userInfo['company_id'];
        });
      },

      async getCompanyList() {
        this.loading = true;
        const map = {all: true};
        let data = await company.getList(map);
        //console.log(data);
        this.companyList = data.data.map(item => {
          return {
            value: item.id,
            label: item.title
          };
        });
        this.companyList.unshift({value: "", label: "请选择公司"});
        this.loading = false;
      },
    },
    computed: {
      //...mapGetters(["getUser"])
    },
    async mounted() {
      if(this.$route.query.id) {
        //编辑
        this.get(this.$route.query.id);
      } else {
        //新增
        this.userInfo.company_id = this.$route.query.company_id;
      }
      await this.getCompanyList();
    }
  };
</script>
